//获取分类  加载到下拉菜单

//向服务器请求数据 渲染select
async function getList(){
    // $('select[name=cate_id]').empty()
    const res=await indexAxios('article/cates')
    res.data.data.forEach(item => {
      $( `<option value="${item.Id}" lay-verify="cate">${item.name}</option>`).appendTo('select[name=cate_id]').appendTo('select[name=cate_id]')
      layui.form.render('select', 'edit');
    })
  }
  
  getList()

  // 2. 集成富文本编辑器
function initTinyMce() {
    tinymce.init({
        selector: 'textarea[name=content]', //容器，可使用css选择器
        language: 'zh_CN', //调用放在langs文件夹内的语言包
        plugins: ['link', 'table', 'image'], //选择需加载的插件
        // //选中时出现的快捷工具，与插件有依赖关系
        // quickbars_selection_toolbar: 'bold italic forecolor | link blockquote quickimage',
    });
}
initTinyMce();

// 3. 集成图片裁剪的插件
let cropper;
function initCropper() {
    // 1. 集成裁剪插件
    const image = document.getElementById('image'); // 获取到要被添加裁剪插件的图片
    cropper = new Cropper(image, {
        aspectRatio: 1, // 横纵比例
        preview: $(".img-preview")
    });
}
initCropper();


//submit  form 利用formdata获取表单元素 把数据提交给服务器进行提交
$('.layui-form').on('submit',async function(e){
    e.preventDefault()
    let fd = new FormData($(".layui-form")[0])

       // 富文本里的东西取出(唯一的用activeEditor)
       var htmlStr = tinyMCE.activeEditor.getContent();
    fd.set('content',htmlStr)

       // 把封面图片的裁剪区域提取出来
       var canvas = cropper.getCroppedCanvas({
           width: 100,
           height: 100
       });
       canvas.toBlob(async function(blobobj){
        fd.append('cover_img',blobobj)
    const res=await userInfoAxios('article/add',fd)
    console.log('发布文章那'+res);

       })



    //跳转到list页面
    location.href='../list/list.html'

    // 查看fd的 内容  foreach是formdata特有的遍历对象方法
       fd.forEach(function(value,key){
     
            console.log(value,key);
       
       } )


})
